<template>
	<view :class="getClass" :style="getStyle">
		<canvas  
		class="QS-Canvas"
		:class="{ hide: hide }"
		:id="componentId" 
		:canvas-id="componentId" 
		:style="{ 
			width: (bgObj.width || 10) + 'px', 
			height: (bgObj.height || 10)  + 'px'
		}"></canvas>
	</view>
</template>

<script>
	import {
		getSharePoster
	} from '../../js/QS-SharePoster/QS-SharePoster.js';
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	import CONFIG from '@/QS-UI-CONFIG/config/index.js';
	const QSComponentMixinRes = QSComponentMixin({ componentType: 'QS-Canvas' });

	var id = 0;
	var _this;
	var ctx;

	export default {
		mixins: [QSComponentMixinRes.mixin],
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			hide: {
				type: [String, Boolean],
				default: true
			},
			height: {
				type: [String, Number],
				default: '200rpx'
			},
			width: {
				type: [String, Number],
				default: '750rpx'
			},
			setContext: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				bgObj: {}
			}
		},
		created() {
			_this = this;
			if (this.setContext) {
				uni[CONFIG.QSUI_JS_NAME].pageRoots.setPageContext(this, 'QS-Canvas');
			}
		},
		mounted() {
			ctx = uni.createCanvasContext(this.componentId, this);
		},
		methods: {
			draw(obj = {}) {
				return new Promise(async(rs, rj)=>{
					try{
						const d = await getSharePoster({
							delayTimeScale: 20, //元素延时系数
							drawDelayTime: 100, //额外延时时长, 生成白图时调大此参数
							...obj,
							_this: this, //若在组件中使用 必传
							posterCanvasId: this.componentId, //canvasId
							Context: ctx, //强烈推荐传入自己创建的canvas实例, uni.createCanvasContext(canvasId, this), 以防出现卡在绘制中的问题
							setCanvasWH({ //一般必传， 动态设置canvas宽高
								bgObj
							}) {
								_this.bgObj = bgObj;
							}
						})
						rs(d)
					}catch(e){
						//TODO handle the exception
						rj(e)
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.QS-Canvas {
		
	}
	.hide{
		position: absolute;
		top: -99999px;
		right: 99999px;
		opacity: 0;
		pointer-events: none;
	}
</style>
